<template>
  <login :imageUrl="imgUrl" @loginClick='login'>
    <img src="~assets/images/login_center.png" alt="无法加载图片" slot="login-left">
    <div slot="login-title">
      <img src="~assets/images/login_logo.png" alt="Tring AI">
      <div class="login-tit">人工智能教学管理平台</div>
    </div>
    <div slot="login-info">
      <div class="inner-container">
        <div class="login-icon-label">
          <img src="~assets/images/icons/account.png" alt="">
        </div>
        <input type="text" placeholder="请输入账号" v-model="useraccount">
      </div>
      <div class="inner-container">
        <div class="login-icon-label">
          <img src="~assets/images/icons/pwd.png" alt="">
        </div>
        <input type="password" placeholder="请输入密码" v-model="userpsw">
      </div>
    </div>
    <div slot="login-record">
      <Checkbox v-model="isRemember" @click="remember">记住用户名</Checkbox>
       <Select v-model="currentMode.label" size="small" style="width:100px" class="login-select">
        <Option v-for="item in modeList" :value="item.label" :key="item.label">{{ item.name }}</Option>
    </Select>
    </div>
  </login>
</template>
<script lang="ts">
import { Component , Vue , Prop } from 'vue-property-decorator'
// import router from '../../../router/index'
import router from 'vue-router'
// import Component from 'vue-class-component'
import Login from '../../common/login/Login.vue'
import { UserStore } from '../../../store/module/login/UserManage'

@Component({
  name:'MainLogin',
  components:{
    Login
  }
})
export default class MianLogin extends Vue{
  // imgUrl:string='~assets/images/login_background.jpg';
  imgUrl:string='require("@/assets/images/login_background.jpg");'
  isRemember:boolean=false;
  useraccount:string='1';
  userpsw:string='1';

  currentMode={
    name:"学生端",
    value:"../#/login",
    label:"学生端"
  };

  modeList:{
    name:string;
    label:string;
    value:string;
  }[]=[
    {
      name:"学生端",
      value:"../#/login",
      label:"学生端"
    },
    {
      name: "教师端",
      value: "../teacherclient/#/login",
      label: "教师端",
    },
    {
      name: "学校端",
      value: "../manage/#/login",
      label: "学校端",
    },
  ]
  
  login(){
    sessionStorage.setItem('useraccount',this.useraccount);
    sessionStorage.setItem('password',this.userpsw);
    this.$router.push('/index');
  }

  remember():void{
    
  }

  get Userinfo(){
    return UserStore.useraccount;
  }
}
</script>
<style lang="less">
.login-left{
  img{
    position: relative;
    margin-top: 10rem;
    width: 75%;
  }
}
.login-right{
  position: relative;
  width: 50%;
  padding-left: 1rem;
  text-align: left;
  .login-title{
    margin-bottom: 2rem;
    img{
      width: 40%;
      margin-top: 7rem;
    }
    .login-tit{
      font-size: 17px;
      font-weight: 800;
    }
  }
  .login-info{
  .inner-container{
    display: flex;
    width: 66%;
    height: 3.3125rem;
    padding: 1rem;
    padding-left: 0;
    border-bottom: 1px solid #ccc;
    img{
      width: 1.5rem;
      margin-right: 0.75rem;
    }
    input{
      border: 0;
      outline: none;
      font-size: 15px;
    }
  }
}
.login-record{
  // display: flex;
  // justify-content: space-between;
  width: 75%;
  margin: 2rem 0;
  .login-select{
    float: right;
  }
}
}

</style>